@import "../../../../../index";

.context-menu__wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;

  .context-menu__list-item {
    position: absolute;
    left: var(--position-x);
    top: var(--position-y);
    background-color: $primary-light-color;
    border-radius: 1rem;
    border: 1px solid $primary-dark-text;

    > p {
      cursor: pointer;
      transition: background-color .2s linear;
      padding: 1rem;
      margin: 0 ;
    }

    > p:first-child {
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
    }

    > p:last-child {
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
    }

    > p:hover {
      background-color: hsla(0, 0%, 0%, .25);
    }
  }
}